<template>
  <header v-if="show"
  class="w-full  z-50 bg-[#f0f8ff] rounded-bl-4 rounded-br-4">
    <!-- 第一行 -->
    <div class="h-21 flex flex-col items-center ">
      <n-grid :cols="3"
              responsive="screen"
              class="h-20 relative  w-full ">
        <n-gi class="h-12  md:flex items-center justify-left pl-4 text-5 pt-1">
          <p class="hidden md:flex">Section 1: Reading and Writing</p>
        </n-gi>
        <n-gi class="h-12 flex items-center justify-center text-5 pt-1">
          <p>{{ formatTime(remainingTime) }}</p>
        </n-gi>
        <n-gi class="h-12 flex items-center justify-end  pr-4 pt-1">
          <n-icon size="30"
                  color="rgb(118 120 126)">
            <EllipsisVertical />
          </n-icon>
        </n-gi>
      </n-grid>
      <n-grid :cols="3"
              responsive="screen"
              class=" w-full rounded-bl-4 rounded-br-4">
        <n-gi class="h-8 flex leading-1 justify-left pl-4">
          <p class="hidden md:flex">Direction</p>
        </n-gi>
        <n-gi class="h-8 flex leading-1 justify-center">
          <NButton strong
                   @click="hide($event,0)"
                   secondary
                   size="small"
                   round>hide</NButton>
        </n-gi>
        <n-gi class="h-8 flex leading-1 justify-end pr-4">
          <p>more</p>
        </n-gi>
      </n-grid>
    </div>
  </header>
  <div class="tip"
       @click="hide($event,1)">
    <span>THIS IS A TEST PREVIEW</span>
  </div>
</template>
  
  <script setup lang="ts">
import { NGrid, NGi, NButton, NIcon } from "naive-ui";
import { ref, onMounted, onUnmounted } from "vue";
import { EllipsisVertical } from "@vicons/ionicons5";
import { useAppStore } from "@/store";

const show = ref<boolean>(true);
const appStore = useAppStore();

function hide(e: Event, type: number) {
  let s: boolean = type ? true : false;
  show.value = s;
  appStore.updateShow(s);
}
// 总时间（30分钟，单位毫秒）
const totalTime = 30 * 60 * 1000;
const remainingTime = ref(totalTime);
let timer: ReturnType<typeof setInterval> | null = null;

const formatTime = (milliseconds: number | undefined) => {
  if (typeof milliseconds !== "number" || isNaN(milliseconds)) {
    return "00:00";
  }
  const minutes = Math.floor(milliseconds / (60 * 1000));
  const seconds = Math.floor((milliseconds % (60 * 1000)) / 1000);
  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(
    2,
    "0"
  )}`;
};

onMounted(() => {
  timer = setInterval(() => {
    remainingTime.value -= 1000;
    if (remainingTime.value <= 0) {
      clearInterval(timer!);
      remainingTime.value = 0;
    }
  }, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>
  
  <style scoped>
/* 自定义样式（可选） */
.tip {
  width: 90%;
  height: 20px;
  margin: 0 auto;
  text-align: center;
  background: #1494ce;
  color: #fff;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size: 12px;
}
</style>